<template>
  <div class="searchInput">
    <div style="position: relative">
      <input
        type="text"
        v-model="searchText"
        @input="search"
        @focus="getHotDetail"
        @blur="close"
        placeholder="搜索"
      />
      <i class="iconfont iconsousuo"></i>
    </div>
    <div class="tab" style="margin: 0px" v-if="!searchText && showSearch">
      <div class="title">热搜榜</div>
      <div
        class="content"
        v-for="(item, index) in hotList"
        :key="item.id"
        @click="searchHot(item)"
      >
        <div>
          <span class="index" :style="{ color: index < 3 && '#c3473a' }">
            {{ index + 1 }}
          </span>
        </div>
        <div>
          <div>
            <span class="search">{{ item.searchWord }}</span>
            <span class="score">{{ item.score }}</span>
          </div>
          <div class="simpleContent">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div class="tab" style="margin: 0px" v-if="searchText && showSearch">
      <div class="searchText">
        搜 "
        <span>{{ searchText }}</span>
        "相关的结果 >
      </div>
      <div v-for="(item, index) in searchList.order" :key="index">
        <i :class="searchIcon[item]"></i>
        <span class="searchTitle">{{ searchMenu[item] }}</span>
        <div
          v-for="(items, indexs) in searchList[item]"
          :key="indexs"
          class="searchContent"
          @click="goSearch(item, items)"
        >
          {{ items.name }}
          {{ items.artists ? formatArtists(items.artists) : formatArtists(items.artist) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import axios from "@/http";
import { useRouter } from "vue-router";
import startPlaySong from "@/songPlay.minxin.js";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const searchText = ref("");
const hotList = ref([]);
const showSearch = ref(false);
const searchList = ref({ order: [] });
const searchMenu = {
  songs: "歌曲",
  artists: "歌手",
  albums: "专辑",
  playlists: "歌单",
};
const searchIcon = {
  songs: "iconfont iconyinle",
  artists: "iconfont icongeshou",
  albums: "iconfont iconzhuanji",
  playlists: "iconfont icongedan",
};
const searchHot = (item) => {
  searchText.value = item.searchWord;
};
const formatArtists = computed(() => {
  return function (artist: Array<any>) {
    return Array.isArray(artist)
      ? "- " + artist?.map((item: any) => item.name).join(" ")
      : "";
  };
});
const close = () => {
  setTimeout(() => {
    showSearch.value = false;
  }, 200);
};
const goSearch = (item: string, items: any) => {
  console.log(items);
  const songInfo = {
    ...items,
    picUrl: items.artists[0].img1v1Url,
    singer: items.artists[0].name,
  };
  if (item === "songs") {
    startPlaySong(songInfo, store);
  } else {
    switch (item) {
      case "artists":
        router.push("/home/singerInfo/" + items.id);
        break;
      case "albums":
        router.push("/home/albumInfo/" + items.id);
        break;
      case "playlists":
        router.push("/home/playList/" + items.id);
        break;
    }
  }
};
const search = () => {
  if (searchText.value === "") {
    searchList.value = { order: [] };
    return;
  }
  axios
    .get("/search/suggest", {
      params: {
        keywords: searchText.value,
      },
    })
    .then((res) => {
      searchList.value = res.data.result;
    });
};
const getHotDetail = () => {
  showSearch.value = true;
  if (searchText.value) search();

  axios.get("/search/hot/detail").then((res) => {
    hotList.value = res.data.data;
  });
};
</script>

<style lang="scss" scoped>
.searchInput {
  .tab {
    .iconfont {
      position: relative;
      vertical-align: 5px;
      font-size: 13px;
      margin-left: 10px;
    }
    .searchText {
      font-size: 13px;
      margin: 6px 10px;
    }
    .searchTitle {
      margin: 0 12px;
      font-size: 13px;
    }
    .searchContent {
      font-size: 13px;
      margin: 2px 0px;
      font-weight: bold;
      color: #b2b2b2;
      padding: 6px 36px;
      &:hover {
        background-color: #333;
      }
    }
  }

  input {
    box-sizing: border-box;
    width: 140px;
    height: 24px;
    background-color: #40403f;
    outline: none;
    border: none;
    border-radius: 20px;
    padding: 2px 20px;
    color: #b2b2b2;
    font-size: 12px;
  }
  i {
    position: absolute;
    left: 6px;
    top: 5px;
    font-size: 12px;
  }
  .tab {
    position: absolute;
    z-index: 99999;
    width: 360px;
    height: 560px;
    background-color: #363636;
    right: 0px;
    top: 50px;
    overflow: auto;
    .title {
      font-size: 14px;
      font-weight: bold;
      margin: 20px;
    }
    .content {
      display: flex;
      align-items: center;
      padding: 16px 16px;
      height: 20px;
      &:hover {
        background-color: #333;
      }
      span {
        font-size: 13px;
        font-weight: bold;
        color: #5e5e5e;
        margin: 0px 10px;
        line-height: 20px;
      }
      .index {
        font-size: 16px;
      }
      .search {
        color: #b7b7b7;
      }
      .simpleContent {
        font-size: 12px;
        color: #707070;
        font-weight: bold;
        margin: 0 10px;
        line-height: 20px;
      }
    }
  }
}
</style>
